<template>
  <div class="sys"> 
    sys
	<my-component page="sys"></my-component>
	<p>姓名： {{name}}<button v-on:click="rename">vuex异步修改名字，利用commit触发mutations</button></p>
	<p>性别：{{sex}}<button v-on:click="resex">vuex同步修改性别，利用dispatch触发actions</button></p>
  </div>
</template>

<script>
export default {
  name: 'sys',
  computed: {
    name: function() {
      return this.$store.state.sys.name
    },
	sex: function() {
      return this.$store.state.sys.sex
    }
  },
  methods:{
  	resex:function(){
		this.$store.commit("resex")
	},
	rename:function(){
		this.$store.dispatch("rename")
	}
  }
}
</script>
